<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <use-card></use-card>
    <script>
      class UseCard extends HTMLElement {
        constructor() {
          super();
          let shaDow = this.attachShadow({ mode: "closed" });
          let el = this.creat("div");
          el.innerText = "24";
          el.setAttribute(
            "style",
            "width:200px;height:50px;border:1px solid red;"
          );
          shaDow.append(el);
        }
        creat(el) {
          return document.createElement(el);
        }
      }
      window.customElements.define("use-card", UseCard);
    </script>
  </body>
</html>
